<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫酷的文字LOGO效果</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        body{
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #4d3e4d;
        }

        div span{
            display: inline-block;
            position: relative;
            font-weight: bold;
            font-size: 4em;
            color: purple;
            text-transform: uppercase;
        }

        .color{
            animation-name: color;
            animation-duration: 1s;
            animation-iteration-count: 2s;
            animation-timing-function: linear;
        }

        @keyframes color {
            50%{
                transform: scale(2);
                color:orange
            }

            to{
                transform: scale(.5);
                color:yellow;
            }
        }

        
    </style>
</head>
<body>
    <div>houdunren.com</div>
</body>
    <script>
        let div = document.querySelector('div');
        [...div.textContent].reduce(function (pre,cur,index) {
            console.log(pre,cur,index);
            if(pre == index){
                div.innerHTML = '';
            }
            let span = document.createElement('span');
            span.innerHTML = cur;
            div.appendChild(span);
            span.addEventListener('mouseover',function () {
                this.classList.add('color');
            });
            span.addEventListener('animationend',function(){
                this.classList.remove('color');
            })
        },0);
        
    </script>
</html>